<ion-header class="header">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button [routerLink]="['/contacts/contacts-create']">
        <ion-icon name="chevron-back-outline" class="global-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title mode="ios">查看手机通讯录</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="content">
  <div *ngFor="let item of contactUsers">
    <ion-list class="contact-list" lines="none" *ngIf="item.data.length!=0">
      <ion-list-header>
        {{item.letter}}
      </ion-list-header>
      <ion-item *ngFor="let contact of item.data">
        <ion-avatar slot="start">
          <img [src]="contact.photoUrl?contact.photoUrl:'./assets/images/user.default.jpeg'">
        </ion-avatar>
        <ion-label>
          <h2>{{contact.displayName}}</h2>
          <h4>微信:{{contact.username}}</h4>
        </ion-label>
        <span slot="end" class="operation" [ngClass]="{'added':contact.isFriend}" (click)="addContact(contact)">
          {{contact.isFriend?'已':''}}添加
        </span>
      </ion-item>
    </ion-list>
  </div>
</ion-content>